<!--
 * @Author: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @Date: 2022-09-05 15:57:19
 * @LastEditors: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @LastEditTime: 2022-09-08 12:18:57
 * @FilePath: \XAJT\xxtx-ui\src\views\Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @Date: 2022-09-05 15:57:19
 * @LastEditors: weiting112 10254483+weiting112@user.noreply.gitee.com
 * @LastEditTime: 2022-09-07 22:09:59
 * @FilePath: \xxtx-ui\src\views\Home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <div class="header_top" v-show="show">
        <ul>
          <li><a href="" class="h-logo"></a></li>
          <li
            v-for="item in categories.slice(0, 12)"
            :key="item.id"
            @click="toArticle(item.category)"
          >
            <a>{{ item.category.name }}</a>
          </li>
        </ul>
      </div>
      <div class="header_bottom">
        <div class="wrapper">
          <div class="header_bottom_container">
            <div class="left">
              <a href="#"><img src="@/assets/yxtx/logo_03.png" alt="" /></a>
            </div>
            <div class="right">
              <input type="text" />
              <a href="" class="sc"></a>
              <a href="#" class="block">交大主页</a>
              <a href="#" class="block">新闻投稿</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 头部 -->

    <!-- 体部 -->
    <div class="center">
      <div class="wrapper">
        <div class="center_first">
          <div class="zy">
            <div class="banner">
              <el-carousel height="450px">
                <el-carousel-item v-for="item in swipes" :key="item.id">
                  <img :src="item.url" alt="" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="new_list">
              <div class="t">
                <p>主</p>
                <span>页新闻</span>
                <a @click="toMore(3, '主页新闻')">查看更多</a>
              </div>
              <div class="new">
                <ul>
                  <li v-for="item in zhuyexinwen.aritcle" :key="item.id">
                    <p>{{ item.publishTime | fmtDate }}</p>
                    <a  @click="toList(item.id,'主页新闻')">{{ item.title }}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="center_second">
          <!-- 左侧 -->
          <div class="left">
            <!-- 图片 -->
            <div class="pic">
              <a href="#">
                <img src="@/assets/yxtx/pic1.png" alt="" />
              </a>
              <a href="#">
                <img src="@/assets/yxtx/pic2.jpg" alt="" />
              </a>
            </div>
            <!-- 列表 -->
            <div class="left_one">
              <div class="link">
                <ul>
                  <li
                    v-for="(item, index) in categories.slice(1, 8)"
                    :key="index"
                    :class="tabIndex == index ? 'active' : ''"
                    @click="ChangeTab(index)"
                    ref="click"
                  >
                    {{ item.category.name }}
                  </li>
                </ul>
                <a @click="toMore(3, '主页新闻')">查看更多</a>
              </div>
              <div class="list">
                <ul>
                  <li v-for="unique in showConten" :key="unique.id" @click="toList(unique.id,unique.category.name)">
                    <a href="">
                      <div class="list-left">
                        <span>{{ unique.publishTime | fmtDay }}</span>
                        <br />
                        <span>{{ unique.publishTime | fmtDate2 }}</span>
                      </div>
                      <div class="list-right">
                        <a href="#">{{ unique.title }}</a>
                        <a href="#">{{ ToText(unique.content) }}</a>
                      </div>
                    </a>
                  </li>
                </ul>
                <div class="box"></div>
              </div>
            </div>
            <!-- 人文交大 -->
            <div class="left_two">
              <div class="link">
                <ul>
                  <li>人文交大</li>
                </ul>
                <a @click="toMore(13, '图片交大')">查看更多</a>
              </div>
              <div class="left_two_pic">
                <a @click="toList(159, '图片交大')">
                  <img src="@/assets/yxtx/ltp1.jpg" alt="" />
                  <span>图片交大</span>
                </a>
                <a href="">
                  <img src="@/assets/yxtx/ltp2.png" alt="" />
                  <span>视频交大</span>
                </a>
                <a href="">
                  <img src="@/assets/yxtx/ltp3.jpg" alt="" />
                  <span>追根溯源</span>
                </a>
              </div>
            </div>
            <!-- 媒体交大 -->
            <div class="left_three">
              <div class="link">
                <ul>
                  <li>媒体交大</li>
                </ul>
                <a @click="toMore(11, '媒体交大')">查看更多</a>
              </div>
              <div class="left_three_pic">
                <a  v-for="item in meiti.aritcle" :key="item.id" @click="toList(item.id,'媒体交大')" >
                  <img :src="item.cover" />
                  <span  style="cursor: pointer;">{{ item.title }}</span>
                </a>
              </div>
            </div>
            <!-- 新闻专题 -->
            <div class="left_four">
              <div class="link">
                <ul>
                  <li>新闻专题</li>
                </ul>
                <a @click="toMore(12, '新闻专题')">查看更多</a>
              </div>
              <div class="news_banner">
                <el-carousel :interval="4000" type="card" height="270px">
                  <el-carousel-item
                    v-for="item in xinwen.aritcle"
                    :key="item.id"
                    class="banner_box"
                    @click="toList(item.id,'新闻专题')"
                  >
                    <img :src="item.cover" alt="" />
                    <p>{{ item.title }}</p>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="right">
            <div class="right_one">
              <div class="main_title">
                <a @click="toMore(15, '今日交大')">查看更多</a>
                <span>今日交大</span>
                <div class="r1"></div>
                <div class="two"></div>
                <div class="r1"></div>
              </div>
              <div class="main_content">
                <ul>
                  <li v-for="item in cateQuery" :key="item.id" @click="toList(item.id,'今日交大')">
                    <a href="">
                      <div class="timebar">
                        <i></i>
                        {{ item.publishTime | fmtDate }}
                      </div>
                      <div class="text">
                        <a href="#">{{ item.title }}</a>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right_two">
              <div class="main_two_title">
                <ul>
                  <li>
                    <a href="#">
                      <i class="weixin"></i>
                      微信
                    </a>
                    <p>/</p>
                  </li>
                  <li>
                    <a href="#">
                      <i class="weibo"></i>
                      微博
                    </a>
                  </li>
                </ul>
                <div class="r1"></div>
                <div class="two"></div>
                <div class="r1"></div>
              </div>
              <div class="main_two_text">
                <ul>
                  <li class="text_one">
                    <a href="">
                      <img src="@/assets/yxtx/text_one.jpg" alt="" />
                      <span>王绍华老师，“中国好人”</span>
                    </a>
                  </li>
                  <li v-for="item in renwu" :key="item.id"  @click="toList(item.id,'人物风采')">
                    <div class="text_r">
                      <a href="#">
                        <img :src="item.cover" alt="" />
                      </a>
                    </div>
                    <div class="text_l">
                      <a href="#">
                        {{ item.title }}
                      </a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right_three">
              <div class="main_title">
                <a href="#">查看更多</a>
                <span>西安交大报</span>
                <div class="r1"></div>
                <div class="two"></div>
                <div class="r1"></div>
              </div>
              <div class="main_three_text">
                <div class="tr">
                  <img src="@/assets/yxtx/tr.jpg" alt="" />
                </div>
                <div class="tl">
                  <ul>
                    <li>
                      <a href="">第14659期</a>
                    </li>
                    <li>
                      <a href="">第18806期</a>
                    </li>
                    <li>
                      <a href="">第12796期</a>
                    </li>
                    <li>
                      <a href="">第13705期</a>
                    </li>
                    <li>
                      <a href="">第10459期</a>
                    </li>
                    <li>
                      <a href="">第14696期</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 体部 -->

    <!-- 底部 -->
    <Footer></Footer>
    <!-- 底部 -->
  </div>
</template>

<script>
import { get } from "@/utils/request";
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      name: "",
      id: "",
      show: false,
      // 分类参数
      categories: [],
      // 主页新闻
      zhuyexinwen: [],
      // 媒体交大
      meiti: [],
      // 轮播图
      swipes: [],
      // 新闻专题
      xinwen: [],
      // 人物风采
      renwu: [],
      // 栏目信息
      columns: [],
      // 分页查询指定资讯
      params: {
        page: 1,
        pageSize: 100,
      },
      // 接收分页查询资讯的数据
      cateQuery: [],
      // 切换tab
      tabIndex: [],
      // tab显示内容
      showConten: [],
      // index:0
    };
  },
  // 监听器属性/侦听器属性
  // 监听数据类型变化
  // 监听基本数据类型使用浅监听
  // 监听引用数据类型使用深度监听
  methods: {
    showSearch() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 80) {
        // 当页面滚动到高度300px处，动态绑定class 来设置头部固定定位
        this.show = true;
      } else {
        this.show = false;
      }
    },
    // 查找所有资讯分类
    async FindAllCate() {
      let res = await get("/index/article/findCategoryArticles");
      // console.log(res);
      this.categories = res.data;
      this.zhuyexinwen = this.categories[0];
      console.log(this.zhuyexinwen,'zhuye');
      this.meiti = this.categories[8];
      this.xinwen = this.categories[9];
    },
    // 查找所有的轮播图
    async FindAllSwipes() {
      let res = await get("/index/carousel/findAll");
      // console.log(res);
      this.swipes = res.data;
    },
    // 分页查询指定资讯
    async PageQueryArticl() {
      let res = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 100,
        categoryId: 15,
      });
      // console.log(res);
      this.cateQuery = res.data.list;
      console.log(this.cateQuery);
      let res2 = await get("/index/article/pageQuery", {
        page: 1,
        pageSize: 3,
        categoryId: 9,
      });
      console.log(res2, "res2");
      this.renwu = res2.data.list;
    },
    // 跳到文章页面
    toArticle(item) {
      // 编程式导航跳转
      this.$router.push({
        path: "/article",
        query: item,
      });
    },
    // 查看更多
    toMore(id, name) {
      // 编程式导航跳转
      this.$router.push({
        path: "/article",
        query: { id, name },
      });
    },
    // 查看文章详情
    toList(id, name) {
      // 编程式导航跳转
      this.$router.push({
        path: "/list",
        query: { id, name },
      });
    },
    // 点击事件/teb切换
    async ChangeTab(index) {
      console.log(index);
      this.tabIndex = index;
      // this.OneCate = res.data.list
      if (this.tabIndex == 0) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 4,
        });
        // console.log(res);
        this.showConten = res.data.list;
        console.log(this.showConten,'conten');
      }
      if (this.tabIndex == 1) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 5,
        });
        // console.log(res);
        this.showConten = res.data.list;
      }
      if (this.tabIndex == 2) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 6,
        });
        console.log(res);
        this.showConten = res.data.list;
      }
      if (this.tabIndex == 3) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 7,
        });
        console.log(res);
        this.showConten = res.data.list;
        console.log(this.showConten.length);
      }
      if (this.tabIndex == 4) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 8,
        });
        console.log(res);
        this.showConten = res.data.list;
      }
      if (this.tabIndex == 5) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 9,
        });
        console.log(res);
        this.showConten = res.data.list;
      }
      if (this.tabIndex == 6) {
        let res = await get("/index/article/pageQuery", {
          page: 1,
          pageSize: 6,
          categoryId: 10,
        });
        console.log(res);
        this.showConten = res.data.list;
      }
    },
    // 转化成纯文本
    ToText(HTML) {
      var input = HTML;
      return input
        .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "")
        .replace(/<[^>]+?>/g, "")
        .replace(/\s+/g, " ")
        .replace(/ /g, " ")
        .replace(/>/g, " ");
    },
    // 根据栏目id获取对应栏目文章
    async getArticleById() {
      this.params.categoryId = this.id;
      let res = await get("/index/article/pageQuery", this.params);
      // console.log(res, "获取响应");
      this.columns = res.data.list;
    },
  },
  // computed:{
  //   renwen(){
  //     return this.cateQuery.filter(item=>{
  //       return item.categoryId == 13
  //     })
  //   }
  // },
  created() {
    window.addEventListener("scroll", this.showSearch);
    this.name = this.$route.query.name;
    //  console.log(this.$route.query);
    // 栏目id
    this.id = this.$route.query.id;
    this.FindAllCate();
    this.FindAllSwipes();
    this.PageQueryArticl();
    this.ChangeTab(0);
  },
  components: { Footer },
};
</script>

<style lang="scss">
// 背景图片
.bgBackground {
  width: 100%;
  // height: 100%;
}
// 头部样式
.header {
  // float: left;
  .header_top {
    position: fixed;
    top: 0;
    height: 65px;
    width: 100%;
    background: #b22923;
    z-index: 1000;
    ul {
      display: flex;
      li {
        line-height: 65px;
        margin-right: 18px;
        margin-left: 18px;
        a {
          font-size: 16px;
          color: #ffffff;
          cursor: pointer;
        }
        .h-logo {
          margin-top: 11px;
          display: block;
          width: 183px;
          height: 50px;
          background: url("../assets/yxtx/z-logo02_01.png") no-repeat;
        }
      }
    }
  }
  .header_bottom {
    width: 100%;
    height: 240px;
    display: block;
    background: url(../assets/yxtx/topb_01.png) no-repeat;
    background-size: auto;
    background-size: 100% 100%;
    .header_bottom_container {
      display: flex;
      justify-content: space-between;
      height: 119px;
      // background-color: #836;
      padding-top: 50px;
      .left {
        img {
          width: 380px;
          height: 65px;
        }
      }
      .right {
        padding-top: 20px;
        input {
          box-sizing: content-box;
          border: none;
          background: #ffffff;
          border: 1px solid #ffffff;
          line-height: 31px;
          height: 31px;
        }
        a {
          display: inline-block;
          margin-right: 10px;
        }
        .sc {
          width: 46px;
          height: 35px;
          vertical-align: bottom;
          position: relative;
          left: -5px;
          // background-color: #097;
          background: url(../assets/yxtx/seach_03.png) no-repeat;
        }
        .block {
          float: right;
          width: 65px;
          height: 25px;
          padding: 5px 15px;
          border: 1px solid #ffffff;
          font-size: 16px;
          font-weight: bold;
          color: #ffffff;
        }
      }
    }
  }
}
// ------

// 体部样式
.center {
  background-color: #eeeeee;
  a {
    cursor: pointer;
  }
  .center_first {
    height: 450px;
    .zy {
      position: absolute;
      margin-top: -57px;
      background: #ffffff;
      height: 450px;
      width: 1400px;
      display: flex;
      justify-content: space-between;
      .banner {
        // background-color: #287;
        width: 640px;
        height: 450px;
        img {
          width: 640px;
          height: 450px;
        }
      }
      .new_list {
        background-color: #ffffff;
        width: 694px;
        padding: 0px 27px 0px 39px;
        .t {
          margin-top: 20px;
          height: 24px;
          p {
            float: left;
            font-size: 18px;
            color: #b22923;
            font-weight: bold;
            padding-bottom: 5px;
            border-bottom: 2px solid #b22923;
            margin: 0;
          }
          span {
            font-size: 18px;
            color: #b22923;
            font-weight: bold;
          }
          a {
            float: right;
            font-size: 12px;
            color: #333333;
            opacity: 0.5;
          }
        }
        .new {
          ul {
            li {
              padding: 8px 0;
              border-bottom: 1px solid #eaeaea;
              a {
                font-size: 16px;
                color: #444444;
                font-weight: bold;
              }
              p {
                font-size: 12px;
                color: #888888;
                display: block;
              }
            }
            li:hover a {
              color: #b22923;
            }
          }
        }
      }
    }
  }
  .center_second {
    display: flex;
    justify-content: space-between;
    .left {
      width: 1020px;
      // height: 300px;
      // background-color: #759;
      // 每一部分的导航样式
      a {
        cursor: pointer;
      }
      .link {
        height: 45px;
        background-color: #ffffff;
        a {
          float: right;
          line-height: 45px;
          opacity: 0.5;
          font-size: 12px;
          margin-right: 30px;
        }
        ul {
          li {
            font-size: 16px;
            position: relative;
            text-align: center;
            float: left;
            width: 100px;
            line-height: 45px;
            cursor: pointer;
          }
          .active {
            color: #ffffff;
            font-weight: bold;
            height: 49px;
            display: block;
            background: url(../assets/yxtx/tite_03.png);
          }
        }
      }
      .pic {
        display: flex;
        img {
          width: 495px;
          height: 93px;
        }
        img:first-child {
          margin-right: 30px;
        }
      }
      .left_one {
        margin-top: 28px;
        // background-color: #935;
        // height: 300px;
        .list {
          margin-top: 10px;
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              width: 495px;
              height: 98px;
              padding: 13px 0;
              border-bottom: 1px solid #eaeaea;
              background: #ffffff;
              .list-left {
                float: left;
                width: 65px;
                height: 70px;
                background-color: rgb(255, 255, 255);
                padding-left: 17px;
                span:first-child {
                  font-size: 30px;
                  color: #b22923;
                }
                span:last-child {
                  font-size: 12px;
                  color: #888888;
                  display: block;
                }
              }
              .list-right {
                overflow: hidden; //多余的部分隐藏
                white-space: nowrap;
                a:first-child {
                  font-size: 16px;
                  color: #444444;
                  display: block;
                  height: 48px;
                  line-height: 27px;
                  margin-right: 20px;
                  overflow: hidden;
                  // width: px;
                  text-overflow: ellipsis; //多余的部分显示省略号
                }
                a:last-child {
                  font-size: 12px;
                  color: #888888;
                  display: block;
                  line-height: 20px;
                  padding-top: 10px;
                  overflow: hidden;
                  margin-right: 20px;
                  text-overflow: ellipsis; //多余的部分显示省略号
                }
              }
            }
            li:nth-child(2n-1) {
              margin-right: 30px;
            }
            li:hover {
              box-shadow: 3px 25px 44px -7px rgba(0, 0, 0, 0.8);
              transform: scale(1);
              z-index: 100;
              background-color: #fff;
            }
          }
          .box {
            height: 30px;
          }
        }
      }
      .left_two {
        margin-top: 20px;
        // height: 400px;
        // background-color: rgb(163, 248, 144);
        a {
          cursor: pointer;
        }
        .link {
          ul {
            li {
              color: #ffffff;
              font-weight: bold;
              height: 49px;
              display: block;
              background: url(../assets/yxtx/tite_03.png);
            }
          }
        }
        .left_two_pic {
          background-color: #fff;
          padding: 30px 20px;
          margin-top: 10px;
          display: flex;
          justify-content: space-around;
          a {
            width: 300px;
            height: 170px;
            span {
              float: left;
              line-height: 37px;
              padding-left: 15px;
              width: 104px;
              height: 37px;
              position: relative;
              bottom: 41px;
              font-size: 16px;
              color: #ffffff;
              background: url(../assets/yxtx/xcvb.png);
            }
            img {
              width: 300px;
              height: 170px;
            }
          }
        }
      }
      .left_three {
        margin-top: 30px;
        // background-color: rgb(234, 149, 149);
        height: 400px;
        a {
          cursor: pointer;
        }
        .link {
          ul {
            li {
              color: #ffffff;
              font-weight: bold;
              height: 49px;
              display: block;
              background: url(../assets/yxtx/tite_03.png);
            }
          }
        }
        .left_three_pic {
          margin-top: 10px;
          background-color: #fff;
          padding: 30px 20px;
          a:last-child {
            margin-right: 0px;
          }
          a {
            width: 170px;
            height: 250px;
            display: inline-block;
            margin-right: 32px;
            span {
              font-size: 16px;
              color: #444444;
              display: inline-block;
              margin-top: 10px;
              width: 171px;
              height: 41px;
              overflow: hidden;
              white-space: wrap;
              text-overflow: ellipsis; //多余的部分显示省略号
            }
            img {
              width: 170px;
              height: 232px;
            }
          }
        }
      }
      .left_four {
        .link {
          ul {
            li {
              color: #ffffff;
              font-weight: bold;
              height: 49px;
              display: block;
              background: url(../assets/yxtx/tite_03.png);
            }
          }
        }
        margin-top: 30px;
        .news_banner {
          margin-top: 10px;
          padding: 30px 20px;
          height: 357px;
          background-color: #fff;
          .banner_box {
            box-sizing: border-box;
            background-color: #fff;
            padding: 30px 90px;
            img {
              width: 295px;
              height: 170px;
            }
            p {
              padding-left: 20px;
              font-size: 16px;
              color: #444444;
              height: 55px;
              // line-height: 55px;
            }
          }
        }
      }
    }
    .right {
      // height: 300px;
      width: 340px;
      .r1 {
        border: 1px solid #eaeaea;
      }
      .two {
        border: 1px solid #ffffff;
      }
      .right_one {
        background: rgb(255, 255, 255);
        padding: 10px 30px;
        .main_title {
          a {
            font-size: 12px;
            color: #333333;
            opacity: 0.5;
            float: right;
            margin-top: 5px;
          }
          span {
            font-size: 18px;
            font-weight: bold;
            color: #b22923;
            margin-bottom: 7px;
            display: block;
          }
        }
        .main_content {
          ul {
            margin-top: 30px;
            li {
              height: 90px;
              display: block;
              background: url(../assets/yxtx/jrjd2_06.png) no-repeat;
              padding-bottom: 17px;
              // overflow: hidden;

              a {
                .timebar {
                  color: #888888;
                  border: 1px solid #bfc3c4;
                  padding: 0 12px;
                  position: relative;
                  display: inline-block;
                  line-height: 24px;
                  top: -12px;
                  margin-left: 25px;
                  i {
                    position: absolute;
                    display: block;
                    top: 5%;
                    width: 20px;
                    left: -5px;
                    height: 22px;
                    background: url(../assets/yxtx/jrjd2_08.png) no-repeat;
                  }
                }
                .text {
                  padding-left: 20px;
                  a {
                    font-size: 16px;
                    color: #444444;
                  }
                }
              }
            }
            li:hover {
              background: url(../assets/yxtx/jrjd_05.png) no-repeat;
            }
            li:hover .timebar {
              color: #ffffff;
              background: #00467f;
              box-sizing: border-box;
            }
            li:hover .timebar i {
              background: url(../assets/yxtx/jrjd2_03.png) no-repeat;
            }
            li:hover .text a {
              color: #b22923;
            }
          }
        }
      }
      .right_two {
        margin-top: 20px;
        // height: 300px;
        background: rgb(255, 255, 255);
        padding: 10px 30px;
        padding-bottom: 40px;
        .main_two_title {
          padding-top: 15px;
          ul {
            height: 25px;
            li {
              display: inline-block;
              p {
                margin: 0 15px;
                float: right;
                color: #c9c1c1;
              }
              a {
                i {
                  width: 24px;
                  height: 20px;
                  float: left;
                  display: block;
                  margin-right: 7px;
                }
                .weixin {
                  background: url(../assets/yxtx/wechart.png) no-repeat;
                }
                .weibo {
                  background: url(../assets/yxtx/wb.png) no-repeat;
                }
              }
            }
          }
        }
        .main_two_text {
          margin-top: 20px;
          li {
            padding: 5px 0;
            border-bottom: 1px solid #eaeaea;
            .text_r {
              float: right;
              img {
                width: 60px;
                height: 60px;
              }
            }
            .text_l {
              width: 217px;
              padding: 10px 0px;
              margin-right: 15px;
              a {
                font-size: 16px;
                color: #444444;
              }
            }
          }
          .text_one {
            img {
              width: 287px;
              height: 165px;
            }
            span {
              position: relative;
              top: -28px;
              left: 0px;
              font-size: 16px;
              color: #fff;
              margin-left: 10px;
            }
          }
        }
      }
      .right_three {
        height: 270px;
        background: #ffffff;
        margin: 20px 0;
        padding: 10px 30px;
        .main_title {
          a {
            font-size: 12px;
            color: #333333;
            opacity: 0.5;
            float: right;
            margin-top: 5px;
          }
          span {
            font-size: 18px;
            font-weight: bold;
            color: #b22923;
            margin-bottom: 7px;
            display: block;
          }
        }
        .main_three_text {
          margin-top: 10px;
          .tr {
            float: left;
            img {
              width: 165px;
              height: 225px;
              display: block;
              margin-right: 30px;
            }
          }
          .tl {
            ul {
              float: left;
              margin-top: 30px;
              li {
                width: 80px;
                height: 30px;
                a {
                  font-size: 15px;
                  color: #000;
                  line-height: 30px;
                  font-weight: 500;
                }
                a:hover {
                  color: #b22923;
                }
              }
            }
          }
        }
      }
    }
  }
}
// -------
</style>